<template>
  <div class="my-music">
    <div class="album-slide">
      <div class="album-img">
        <img :src="avator">
      </div>
      <ul class="album-info">
        <li>昵称:{{ username }}</li>
        <li>性别:{{ userSex }}</li>
        <li>生日：{{ birth }}</li>
        <li>故乡：{{ location }}</li>
      </ul>
    </div>
    <div class="album-content">
      <div class="songs-body">
        <album-content :songList="collectList">
          <template slot="title">我的收藏</template>
        </album-content>
      </div>
    </div>
  </div>
</template>

<script>
import {mixin} from '../../mixins';
import {mapGetters} from 'vuex';
import AlbumContent from "@/views/components/AlbumContent";

export default {
  name: 'my-music',
  mixins: [mixin],
  components: {
    AlbumContent
  },
  data() {
    return {
      avator: '',       //用户头像
      username: '',     //昵称
      userSex: '',      //性别
      birth: '',        //生日
      location: '',     //故乡
      introduction: '', //签名
      collection: [],     //收藏的歌曲列表
      collectList: [],    //收藏的歌曲列表（带歌曲详情）
    }
  },
  computed: {
    ...mapGetters([
      'listOfSongs',      //当前播放列表
      'userId',           //当前登录用户id
    ])
  },
  mounted() {
    this.getMsg(this.userId);
    this.getCollection(this.userId);
  },
  methods: {
    getMsg(userId) {
      this.avator = this.$store.state.user.avatar
      this.username = this.$store.state.user.nickName
      this.userSex = '女';
      this.introduction = '什么也没留下';
      console.log( this.avator )
    },
    //获取我的收藏列表
    getCollection(userId) {
      this.collectList = [
        {name: '告白气球', id: 1, url: '', pic: '', lyric: '', introduction: '专辑1'},
        {name: '听妈妈的话', id: 2, url: '', pic: '', lyric: '', introduction: '专辑2'},
      ]
    },
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/my-music.scss';
</style>
